---
# title: "Transform"
title: "变换"
# description: "Utilities for controlling transform behaviour."
description: "用于控制变换行为的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/transform'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## 启用变换

<!-- To enable transformations you have to add the `transform` utility. -->
要启用变换，您必须添加 `transform` 功能类。

```html amber
<template preview>
  <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
    <div class="w-16 h-16 bg-amber-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform rotate-45" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-amber-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform skew-y-12" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-amber-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform scale-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-amber-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform translate-x-4 translate-y-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
  </div>
</template>

<img class="**transform** rotate-45 ...">
<img class="**transform** skew-y-12 ...">
<img class="**transform** scale-50 ...">
<img class="**transform** translate-x-4 translate-y-4 ...">
```

<!-- ## Hardware acceleration

A lot of transformations can be executed on the GPU instead of the CPU. This enables better performance. You can use the `transform-gpu` utility to enable GPU Acceleration. -->
## 硬件加速

很多变换可以在 GPU 上执行，而不是在 CPU 上执行。这样可以获得更好的性能。您可以使用 `transform-gpu` 功能来启用 GPU 加速。

```html
<div class="**transform-gpu** scale-150 ..."></div>
```

## 禁用变换

<!-- If you want to disable transformations, then you can use the `transform-none` utility. -->
如果您想禁用变换，那么您可以使用 `transform-none` 功能。

```html
<div class="transform rotate-45 **lg:transform-none** ..."></div>
```

<!-- ## Responsive -->
## 响应式

<!-- To enable or disable transforms at a specific breakpoint, add a `{screen}:` prefix to any of the transform utilities. For example, use `md:transform` to apply the `transform` utility at only medium screen sizes and above. -->
要在特定的断点处启用或禁用变换，请在任何变换功能类中添加 `{screen}:` 前缀。例如，使用` md:transform` 来应用 `transform` 功能类在中等大小的屏幕和更大的屏幕上。

```html
<img class="transform **sm:transform-gpu md:transform-none** ...">
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)。

<!-- ### Variants -->
### 变体

<Variants plugin="transform" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="transform" />
